/* animation */
.transDot3 {
  transition: .3s !important;
}

.transDot2 {
  transition: .2s !important;
}

.pointable:hover {
  cursor: pointer;
}

.pointableBlue:hover {
  cursor: pointer;
  color: var(--blue);
}

.transparent {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hidden {
  display: none !important;
}

.fadeOut {
  transform: translateY(-10px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fadeIn {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

.fadeOutLeft {
  transform: translateX(-20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fadeOutRight {
  transform: translateX(20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.zeroWidth {
  width: 0 !important;
  pointer-events: none !important;
}

.zeroHeight {
  height: 0 !important;
  pointer-events: none;
}

.zeroMaxHeight {
  max-height: 0 !important;
  pointer-events: none;
}

.halfWidth {
  width: calc(var(--w) / 2) !important;
}

.quarterWidth {
  width: calc(var(--w) / 4) !important;
}

.rotate180 {
  transform: rotate(180deg) !important;
}

.rotateX180 {
  transform: rotateX(180deg) !important;
}

.eventTrans {
  pointer-events: none;
}

.backFace {
  transform: rotateY(180deg);
}